<template>
  <div class="by-dept">
    <el-row class="row-1" :gutter="20">
      <el-col class="col" :span="8" :offset="0">
        <div class="box">
          <div class="title">预警总数</div>
          <div class="count">
            <div class="red">
              <i class="iconfont icon-yujing"></i>
              {{ warning.red }}
            </div>
            <div class="yellow">
              <i class="iconfont icon-yujing"></i>
              {{ warning.yellow }}
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col" :span="16" :offset="0">
        <div class="box">
          <div class="title">排名</div>
          <div class="rank-wrapper">
            <el-table height="100%" :data="rankTable" border stripe>
              <el-table-column
                v-for="(col, index) in columns"
                :key="index"
                :prop="col.prop"
                :label="col.label"
                :width="col.width"
                :min-width="col.minWidth"
                :align="col.align || 'center'"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="row-2" :gutter="20">
      <el-col class="col" :span="24" :offset="0">
        <div class="box">
          <div class="title">自定义</div>
          <OperateCommon>
            <template #condition>
              <div class="condition-item">
                <label>当前部门</label>
              </div>
            </template>
          </OperateCommon>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import OperateCommon from "@/components/Common/OperateCommon.vue";
import { getPointRank, statistics } from "@/api/AlertSummary/Index";
export default {
  components: { OperateCommon },
  data() {
    return {
      warning: {
        red: 0,
        yellow: 0,
      },
      columns: columns,
      rankTable: [],
    };
  },
  methods: {
    initLight() {
      statistics().then((res) => {
        if (res.code == 0) {
          this.warning.yellow = res.data[0].value;
          this.warning.red = res.data[1].value;
        }
      });
    },
    initData() {
      getPointRank().then((res) => {
        if (res.code == 0) {
          this.rankTable = res.data;
        }
      });
    },
  },
  created() {
    this.initLight();
    this.initData();
  },
};
const columns = [
  {
    prop: "name",
    label: "预警点名称",
    width: "",
    minWidth: "300",
    align: "",
  },
  {
    prop: "num",
    label: "预警总数",
    width: "150",
    minWidth: "",
    align: "",
  },
  {
    prop: "num2",
    label: "黄色预警",
    width: "150",
    minWidth: "",
    align: "",
  },
  {
    prop: "num3",
    label: "红色预警",
    width: "150",
    minWidth: "",
    align: "",
  },
];
</script>

<style lang="scss" scoped>
@import "./alertSummary.scss";
.by-dept {
  height: 100%;
}
.rank-wrapper {
  margin-top: 10px;
  height: calc(100% - 40px);
}
</style>
